<template>
  <el-container>
    <el-header> </el-header>
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <div shadow="never">
          <el-row :gutter="20">
            <el-col :span="11">
              <div class="grid-content" style="text-align: center">
                <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:5001/detectImage"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :on-change="onChange"
                  :before-upload="beforeAvatarUpload"
                >
                  <el-image
                    style="height: 278px"
                    v-if="url"
                    :src="url"
                    fit="fill"
                  ></el-image>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="2"><div class="grid-content"></div></el-col>
            <el-col :span="11">
              <div
                class="grid-content"
                style="width: 100%; height: 178px; text-align: center"
              >
                <div class="avatar-uploader">
                  <el-image
                    style="height: 278px"
                    v-if="res_url"
                    :src="res_url"
                    fit="fill"
                  ></el-image>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-card shadow="hover" style="margin-top: 20px">
          <el-table :data="obj" style="width: 100%">
            <el-table-column prop="labels" label="标签名" width="180">
            </el-table-column>
            <el-table-column prop="value" label="置信度" width="180">
            </el-table-column>
            <el-table-column prop="top" label="top"> </el-table-column>
            <el-table-column prop="left" label="left"> </el-table-column>
            <el-table-column prop="bottom" label="bottom"> </el-table-column>
            <el-table-column prop="right" label="right"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  data() {
    return {
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      obj: [],
      url: "",
      imageUrl: "",
      res_url: "",
      is_upload: false,
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    onChange() {
      if (this.is_upload) return;
      var event = event || window.event;
      var files = event.target.files[0];
      console.log(files);
      var reader = new FileReader();
      //转base64
      reader.onload = (e) => {
        this.url = e.target.result; //将图片路径赋值给src
        // console.log("url", this.url);
        axios
          .post("http://127.0.0.1:5000/detectImage", {
            url: this.url,
          })
          .then((res) => {
            console.log(res.data);
            this.obj = JSON.parse(res.data.obj);
            this.res_url = res.data.img;
            if (res.data.code === "200") {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success",
              });
              for (let i = 0; i < this.obj.length; i++) {
                this.obj[i].labels = this.obj[i].label.split(" ")[0];
                this.obj[i].value = this.obj[i].label.split(" ")[1];
              }
              console.log(this.obj)
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning",
              });
            }
          })
          .catch((res) => {
            console.log(res.data);
          });
      };
      this.urls = reader.readAsDataURL(files);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg-purple-dark {
  background: #99a9bf;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.el-icon-plus {
  border: 1px dashed #d9d9d9;
  margin: 50px;
}
.avatar-uploader {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  width: 100%;
  min-height: 278px;
  /* cursor: pointer; */
  /* position: relative; */
  /* overflow: hidden; */
}
.el-icon-plus:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
